<template>
    <div class="tip_cont flex_center" v-if="istip">
        <img @click="shareFn()" class="share" :class="share?'':'tran'" src="@/assets/img/share_1.png" alt="" srcset="">
        <div class="tip_text" :class="share?'v-enter-active':'v-leave-active'">点击右侧 {{share?'绿色按钮即为正确':'红色按钮即为错误'}}</div>
        <i class="el-icon-circle-close close" @click="closeFn"></i>
        <img class="tip_img" src="@/assets/img/empty2.png" alt="" srcset="">
        <div class="tip_tip">
            <p class="font14"> <span class="font-26">{{share?1:2}}</span>/2</p>
            <div class="flex">
                <span class="bottom" :class="share?'':'opacity'"></span>
                <span class="bottom" :class="share?'opacity':''"></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                istip:true,
                share:true,
            }
        },
        mounted(){
            console.log( 'tips',localStorage.getItem('tips'))
            if(localStorage.getItem('tips')==0){
                this.istip=false
            }
        },
        methods:{
            closeFn(){
                this.istip=false
                localStorage.setItem('tips',0)
            },
            shareFn(){
                this.share=!this.share
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.tip_cont{
    width: 29.6rem;
    // height: 13.4rem;
    padding: 2.9rem 4.9rem 6.1rem 2.7rem;
    border-radius: 4rem 1rem 4rem 4rem;
    background: #019E69;
    font-size: 1.8rem;
    // line-height: 3.6rem;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 1rem;
    overflow: hidden;
    .share{
        width: 3.9rem;
        height: 2.7rem;
    }
    .close{
        width: 1.8rem;
        height: 1.8rem;
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.8rem;
    }
    .tip_text{
        text-align: left;
        margin-left: 1.7rem;
    }
    .tip_img{
        width: 13.5rem;
        height: 8rem;
        position: absolute;
        bottom: 0;
        right: 1rem;
    }
    .tran{
        transform: rotateY(180deg);
    }
    .tip_tip{
        position: absolute;
        left: 2.7rem;
        bottom: 1rem;
        .bottom{
            width: 1.5rem;
            height: 2px;
            background: #fff;
            border-radius: 25.9rem;
            &:last-child{
                margin-left: 3px;
            }
        }
        .opacity{
            opacity: 0.5;
        }
    }
}
.v-enter-active{
        animation: slidein .5s linear;
    }
    .v-leave-active{
        animation: slidein .5s linear reverse;
    }
    @keyframes slidein {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>